import React, { useState } from 'react'
import { Button } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import cx from 'classnames'   // 动态判断类名
import s from './style.module.less'

export default function Deal() {
    const [show, setShow] = useState('beike')
    const navigate=useNavigate()

    const change = (type) => {
        setShow(type)
    }

    const changePage=(e)=>{
        navigate(e)
    }

    const goToAdd=()=>{
        navigate('/addmyhouse')
    }


    return (
        <div className={s.main}>
            <div className={s.top}>
                <div className={cx({ [s.beike]: true, [s.active]: show === 'beike' })} onClick={() => change('beike')}>贝壳指数</div>
                <div className={cx({ [s.myHouse]: true, [s.active]: show === 'myHouse' })} onClick={() => change('myHouse')}>我的房子</div>
            </div>
            <div className={cx({ [s.hidden]: show !== 'myHouse' })}>
                <div className={s.botton1}>
                    <div className={s.left}>
                        <div className={s.add}>添加房子，查看房价走势</div>
                        <div className={s.control}>随时掌握房价信息</div>
                    </div>
                    <div className={s.right}>
                        <Button type='primary' size='small' onClick={()=>goToAdd()}>立即添加</Button>
                    </div>
                </div>
            </div>

            <div className={cx({ [s.hidden]: show !== 'beike' })}>
                <div className={s.botton2}>
                    <div className={s.zhishu}>
                        <div className={s.topWords} onClick={()=>changePage('/cityprice')}>贝壳指数</div>
                        <div className={s.cityBox}>
                            <div className={s.city}>北京房价</div>
                            <div className={s.arrow}></div>
                        </div>
                    </div>
                    <div className={s.line}></div>
                    <div className={s.info}>
                        <div className={s.leftBox}>
                            <div className={s.topPrice}>
                                <div className={s.num}>12078</div>
                                <div className={s.dollor}>元/平</div>
                            </div>
                            <div className={s.oldHouse}>
                                <div className={s.name}>二手房</div>
                                <div className={s.bigArrow}></div>
                                <div className={s.percent}>0.2%</div>
                            </div>
                        </div>
                        <div className={s.rightBox}>
                            <div className={s.num}>19套</div>
                            <div className={s.yesterday}>昨日成交</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}
